<!--
 * @Author: June
 * @Date: 2022-10-10 15:06:28
 * @LastEditors: 无处安放的六月
 * @LastEditTime: 2023-12-05 14:10:40
 * @Description:  菜单权限
 *
-->
<template>
  <div class="app-container">
    <el-row class="cardBox">
      <leftTree ref="leftTree" :data="compData" :default-props="treeProps" search-key="compName" width="300px" @handleNodeClick="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">{{ compName }}</div>
        <el-button icon="el-icon-check" @click="setCheckedAllKeys">全选</el-button>
        <el-divider direction="vertical" content-position="center" />
        <el-button icon="el-icon-close" @click="resetChecked">清空</el-button>
        <el-divider direction="vertical" content-position="center" />
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" style="max-width: calc(100% / 2); margin: 10px 0" />
        <el-divider direction="vertical" content-position="center" />
        <el-button type="primary" icon="el-icon-edit-outline" @click="savePermission">保存</el-button>
        <el-tree v-if="compId && compId !== -1" ref="tree" v-loading="loading" node-key="id" show-checkbox class="filter-tree menu-tree" :accordion="false" :check-on-click-node="false" :expand-on-click-node="true" :data="treeData" :props="treeProps" :filter-node-method="filterNode">
          <span slot-scope="{ data }" class="custom-tree-node">{{ data.name }}</span>
        </el-tree>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import leftTree from '@/components/LeftTree'
export default {
  components: { leftTree },
  data() {
    return {
      filterText: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'compName'
      },
      company: '',
      editShow: true,
      loading: false,
      compData: [],
      limitedPeriod: '',
      compId: '',
      compName: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getAllComp()
    // this.getPlatformMenu()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    /**
     * @description: 获取所有公司
     * @return {*}
     */
    async getAllComp() {
      const res = await this.$axios.post('/platform/comp/listAll', {})
      if (res && res.data.code === 200) {
        this.compData = [
          {
            id: -1,
            compName: '公司',
            children: res.data.data
          }
        ]
        if (res.data.data.length > 0) {
          this.company = res.data.data[0].compName
          this.handleNodeClick(res.data.data[0])
        }
      }
    },
    /**
     * @description: 根据公司id查询平台分配到的菜单
     * @param {*} val {data,node}
     * @return {*}
     */
    async handleNodeClick(val) {
      this.compId = val.id
      if (val && val.id !== -1) {
        this.loading = true
        const res = await this.$axios.get(
          `/platform/menu/listComp?compId=${val.id}`
        )
        if (res?.data.code === 200) {
          this.treeData = res.data.data
          // this.$refs['tree'].setCheckedNodes(res.data.data)
          const checkMenuIdList = []
          this.treeData = res.data.data
          this.treeData.forEach((item) => {
            if (item.allocated === 1) {
              this.pushMenuId(checkMenuIdList, item)
            }
          })
          // console.log(val)
          this.$refs.tree.setCheckedKeys(checkMenuIdList)
          setTimeout(() => {
            this.loading = false
          }, 100)
        }
      }
    },
    pushMenuId(checkMenuIdList, data) {
      if (data.children && data.children.length > 0) {
        data.children.forEach((item) => {
          this.pushMenuId(checkMenuIdList, item)
        })
      }
      if (!data.children && data.allocated === 1) {
        checkMenuIdList.push(data.id)
      }
    },
    /**
     * @description: 保存权限
     * @return {*}
     */
    async savePermission() {
      const checkedList = this.$refs['tree'].getCheckedNodes()
      const halfCheckedList = this.$refs['tree'].getHalfCheckedNodes()
      const res = await this.$axios.post('/comp/menu/save', {
        compId: this.compId,
        userId: this.userId,
        list: [...checkedList, ...halfCheckedList]
      })
      if (res?.data.code === 200) {
        this.$message.success('保存成功')
        this.handleNodeClick({ id: this.compId })
      }
    },

    /**
     * @description: 查询平台菜单
     * @return {*}
     */
    async getPlatformMenu() {
      const res = await this.$axios.get(`/platform/menu/listPlatform`)
      if (res?.data.code === 200) {
        this.treeData = res.data.data
      }
    },
    /**
     * @description: 设置全选
     * @return {*}
     */
    setCheckedAllKeys() {
      this.$refs.tree.setCheckedNodes(this.treeData)
    },
    /**
     * @description: 清空
     * @return {*}
     */
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style lang='scss'>
.menu-tree {
  height: calc(100vh - 240px);
  overflow-y: auto;
  user-select: none;
  .el-tree-node__content {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }
}
</style>
